<template>
  <div class="panel">
    <div class="elements">
      <div id="itemPanel" ref="itemPanel">
        <!--        <i class="iconfont icon-h-drag"></i>-->
        <!--        圆形节点-->
        <div class="icon-tool">
          <div
            class="icon-rect"
            draggable="true"
            data-type="node"
            data-shape="rect-node"
            @dragend="handleDragEnd($event,{id:'react',name:'',shape:'rect-node'})"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import store from '../../store'
import { fittingString } from '../../utils/fittingString'

export default {
  name: 'PanelShape',
  props: {
    elements: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      searchKey: '',
      rootState: store.state
      // state------------
      // name: 'nothing here ~~~',
      // graph: null,
      // currentZoom: 1,
      // maxZoom: 10,
      // minZoom: 0.2,
      // stackList: [],
      // // layoutList: [],
      // // offsetX: 0,
      // // offsetY: 0,
      // stackIndex: -1,
      // savedIndex: 0,
      // maxStack: 20,
      // unique: true, // 节点唯一
      // nodeSelectedList: [],
      // edgeSelectedList: [],
      // fullScreen: false,
      // graphNodes: [],
      // saveNodes: []
    }
  },
  mounted () {
    const icons = [...this.$refs.itemPanel.querySelector('.icon-tool').querySelectorAll('.iconfont')]

    icons.forEach(icon => {
      // 拖拽结束
      // icon.addEventListener('click', e => {
      //   this.$emit(`canvas-add-${e.target.dataset.type}`, e)
      // })
      // icon.addEventListener('dragend', e => {
      //   this.$emit(`canvas-add-${e.target.dataset.type}`, e)
      // })
    })

    // 阻止默认动作
    // document.addEventListener('drop', e => {
    //   e.preventDefault()
    // }, false)
  },

  computed: {
    filterItems () {
      // 搜索
      const { searchKey, rootState } = this
      const { graphNodes, unique } = rootState
      if (unique) {
        return this.elements.filter(
          item => item.name.includes(searchKey) && !graphNodes.includes(item.id)
        )
      } else {
        return this.elements.filter(item => item.name.includes(searchKey))
      }
    }
  },

  methods: {
    handleDragStart () {},

    handleDragEnd (evt, item) {
      // 拖拽节点属性配置
      const { graph } = store.state

      const position = graph.getPointByClient(evt.x, evt.y)
      const id = `${Date.now()}`
      const node = {
        id,
        x: position.x,
        y: position.y,
        size: [160, 50],
        style: {
          fill: '#fff',
          stroke: '#ccc',
          width: 160,
          height: 50
        },
        // label: item.name,
        label: fittingString(item.name, 160, 16),
        _originId: item.id,
        _label: item.name,
        _timeStamp: id
      }
      if (item.shape) {
        node.type = item.shape
      }
      graph.add('node', node)

      const nodeItem = graph.findById(node.id)
      graph.updateItem(nodeItem, {
        style: {
          stroke: '#ccc'
        }
      })

      store.addNode(node)

      // graph.add("node", {
      //   id,
      //   x: position.x,
      //   y: position.y,
      //   label: item.name || item.code || item.title,
      //   _originId: item.id,
      //   _timeStamp: id
      // });

      // let _doStack = graph.get('_doStack')
      // _doStack.push(graph.save())
      // graph.set('_doStack',_doStack)
      // graph.set('_doStackIndex',_doStack.length - 1)
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  //width: 200px;
  width: 120px;
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
  /* padding: 5px 0; */
  line-height: 40px;
  background: #f7f9fb;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.search {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input {
  height: 100%;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  background: #fff;
  padding: 0 8px;
  font-size: 14px;
  color: #666;
}

input:focus,
select:focus,
textarea:focus {
  outline: -webkit-focus-ring-color auto 0;
}

.elements {
  height: 100px;
  flex: auto;
  overflow-y: auto;
}

.element {
  /* text-align: center; */
  padding: 0 20px;
  border-radius: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.element:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
}

#itemPanel .icon-tool {
  /*display: inline-block;*/
  display: block;
  vertical-align: top;
  text-align: center;
  width: 100px;
  height:40px;
  line-height: 40px;
  cursor: move;
  border: 1px solid transparent;
  .icon-rect {
    width: 80px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
  ;
  }
}

</style>
